TuruLav
Dating Website HTML Template
- Created: 25/03/2021
- Latest Update: 25/03/2021
- by: labartisan
- email: labartisan@labartisan.com
Installation
Follow the steps below to get started with turulav Dating Website HTML Template :
-
Open the
Package/turulavFolder to find all the Templates Files - You will need to Upload these files to your Web Server using FTP or cPanle in order to use it on your Website.
-
Make sure you have upload the required files and folders listed below:
-
turulav HTML/assets- Stylesheets, JavaScript, Fonts etc Folder -
turulav HTML/assets/images- Images Folder -
turulav HTML/index.html- Index File/Homepage
-
- You're now ready to go..! Start adding your Content and show off your Brand New Website.
Features At A Glance
- HTML5 & CSS3 & jQuery
- Modern And Creative Design
- Universal menu
- 100% Responsive
- Well documented
- Complete SASS files
- Bootstrap 5
- IcoFont Used
- SwiperSlider Used
- Google Font Used
- Google Map
- Eye Catching Design
- W3C Valid Code
HTML Structure
turulav has follows a simple coding structure. here is the sample:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- x-icon -->
<link rel="shortcut icon" href="assets/images/x-icon.png" type="image/x-icon">
<!-- Other css -->
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/icofont.min.css">
<link rel="stylesheet" href="assets/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>TuruLav</title>
</head>
<body>
<!-- preloader start here -->
<div class="preloader">
<div class="preloader-inner">
<div class="preloader-icon">
<span></span>
<span></span>
</div>
</div>
</div>
<!-- preloader ending here -->
<!-- ==========Header Section Starts Here========== -->
<header class="header-section">
<div class="header-top">
<div class="container">
<div class="header-top-area">
<ul class="left">
<li>
<i class="icofont-ui-call"></i> <span>+800-123-4567 6587</span>
</li>
<li>
<i class="icofont-location-pin"></i> Beverley, New York 224 USA
</li>
</ul>
<ul class="social-icons d-flex align-items-center">
<li>
<p>
Find us on :
</p>
</li>
<li>
<a href="#" class="fb"><i class="icofont-facebook-messenger"></i></a>
</li>
<li>
<a href="#" class="twitter"><i class="icofont-twitter"></i></a>
</li>
<li>
<a href="#" class="vimeo"><i class="icofont-vimeo"></i></a>
</li>
<li>
<a href="#" class="skype"><i class="icofont-skype"></i></a>
</li>
<li>
<a href="#" class="rss"><i class="icofont-rss-feed"></i></a>
</li>
</ul>
</div>
</div>
</div>
<div class="header-bottom">
<div class="container">
<div class="header-wrapper">
<div class="logo">
<a href="index.html">
<img src="assets/images/logo/logo.png" alt="logo">
</a>
</div>
<div class="menu-area">
<ul class="menu">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#0">Features</a>
<ul class="submenu">
<li><a href="members.html">All Members</a></li>
<li><a href="profile.html">Member Profile</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="signup.html">Sign Up</a></li>
<li><a href="pricing-plan.html">Pricing Plan</a></li>
<li><a href="404.html">404 Page</a></li>
<div class="col-lg-4 col-md-6 col-12">
<div class="footer-middle-item-wrapper">
<div class="footer-middle-item-3 mb-lg-0">
<div class="fm-item-title">
<h4>Our Newsletter Signup</h4>
</div>
<div class="fm-item-content">
<p>By subscribing to our mailing list you will always
be update with the latest news from us.</p>
<form>
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<button type="submit" class="lab-btn">Send Massage <i
class="icofont-paper-plane"></i></button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-12">
<div class="footer-bottom-content text-center">
<p>©2021 <a href="index.html">TuruLav</a> -Best For Dating HTML Template.</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- ================ footer Section end Here =============== -->
<!-- scrollToTop start here -->
<a href="#" class="scrollToTop"><i class="icofont-rounded-up"></i></a>
<!-- scrollToTop ending here -->
<!-- All Scripts -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/swiper.min.js"></script>
<script src="assets/js/jquery.counterup.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/functions.js"></script>
</body>
</html>
CSS Structure
We are using several CSS files in this Template. labartisan Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
CSS Fiile Included
- Bootstrap css used
- Icofont used
- Swiper Slider used
- caresouce CSS used
- and some other necessary css files
style.css situated on assets/css/ contain the the all necessary custom style which is well organized and following are the style.css file structure :
@charset "UTF-8"; /*! Template Name: turulav Template URI: https://themeforest.net/user/labartisan Author: labartisan.com Author URI: https://themeforest.net/user/labartisan Description: Description Version: 1.0.0 Text Domain: turulav Tags: community, couple, creative, dating, groups, love template, matching, members, online dating, profile, relationship, romance, social media, social network */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Normalize # Typography # Global CSS # Header CSS *Style-1 *Style-2 *Mobile Header # Page Header # Banner *Style-1 *Style-2 # Main *home + all common section # Blog *Style-1 *Blog Single # Blog Widget # Contact Us #Footer --------------------------------------------------------------*/ /* @@@@@@@@@@@@@ Extend Property CSS Writing Now @@@@@@@@@@@@@@ */ .footer-section .footer-middle .footer-middle-item-wrapper .footer-middle-item .fm-item-content .fm-item-widget .lab-inner, .account-form .form-group .checkgroup, .contact-form-wrapper .contact-form form.comment-form, .contact-item, .comment-respond .add-comment .comment-form, .blog-section .main-blog .blog-wrapper .post-item .tags-section tags, .blog-section .main-blog .blog-wrapper .post-item .tags-section, .blog-section .post-item-inner .blog-footer, .post-item .post-meta .post-meta-bottom .react-list, .post-item .post-meta .post-meta-top, .post-item .post-content .post-author .post-author-inner .author-details .post-status, .post-item .post-content .post-author .post-author-inner .author-details, .post-item .post-content .post-author .post-author-inner, .create-post .lab-inner .lab-content .post-form .content-type .content-list, .create-post .lab-inner .lab-thumb .thumb-inner, .info-card .info-card-content .info-list li, .profile-section .member-profile .profile-item .profile-information .profile-contact li a, .profile-section .member-profile .profile-item .profile-information .profile-contact, .profile-section .member-profile .profile-item .profile-information, .member-page-section .member-wrapper .member-info .all-member, .member-page-section .member-wrapper .member-info, .clints-section .section-wrapper .clients .client-list .client-content .client-info .rating ul, .clints-section .section-wrapper .clients .client-list .client-content .client-info, .banner-form .gender, .banner-form .person, .banner-form .age, .banner-form .city, .banner-form .interest, .banner-section .section-wrapper .banner-content .intro-form .intro-form-inner .social-list, .header-form .form-container, .header-form, .menu, .header-wrapper .menu-area, .header-wrapper, .header-top-area .left, .header-top-area, .paginations ul li a, .group-search .group-search-btn form, .group-search .group-count, .group-search, .member-filter .member-filter-inner .filter-form, .price-item .price-item-inner .price-bottom ul li { display: flex; flex-wrap: wrap; } .footer-section .footer-middle .footer-middle-item-wrapper, .footer-section .footer-middle, .widget.like-member .widget-content .col .image-thumb, .blog-section .main-blog .blog-wrapper .post-item .tags-section .tags li span, .blog-section .main-blog .blog-wrapper .post-item.video-post .post-item-inner .post-thumb .embed-responsive, .blog-section .main-blog .blog-wrapper .post-item.post-slider .post-item-inner .post-thumb .blog-slider, .blog-section .main-blog .blog-wrapper .post-item .post-item-inner .post-content blockquote p, .post-item .post-content .post-author .post-author-inner .author-details .post-status .post-privacy, .create-post .lab-inner .lab-content .post-form .content-type .content-list .image-video, .create-post .lab-inner .lab-content .post-form .content-type .content-list .attach-file, .media-wrapper .tab-content .tab-pane .media-content .album .album-thumb, .media-wrapper .nav-tabs .nav-item .nav-link.active span, .media-wrapper .nav-tabs .nav-item .nav-link.active, .media-wrapper .nav-tabs .nav-item .nav-link span, .info-card .info-card-content .info-list li .info-name, .profile-section .member-profile .profile-details .profile-nav .nav-tabs .dropdown, .profile-section .member-profile .profile-details .profile-nav .nav-tabs .nav-link.active, .profile-section .member-profile .profile-details .profile-nav .nav-tabs .nav-link .item-number, .profile-section .member-profile .profile-item .profile-information .profile-pic, .profile-section .member-profile .profile-item .profile-cover, .member-page-section .member-wrapper .member-info .all-member p:last-child, .app-section .section-wrapper, .clints-section .section-wrapper .clients .client-list .client-content .client-info .name-desi span, .clints-section .section-wrapper .clients .client-list .client-thumb img, .clints-section .section-wrapper .clients .client-list .client-thumb, .clints-section .section-wrapper .clients, .banner-form .gender .left, .banner-form .person .left, .banner-form .age .left, .banner-form .city .left, .banner-form .interest .left, .banner-section .section-wrapper .banner-thumb, .banner-section .section-wrapper .banner-content .intro-form, .banner-section, .page-header-section.style-1 .page-header-content .page-header-inner .breadcrumb li a, .menu-item-has-children > a, .header-bar, .custom-select, .cart-plus-minus, .paginations ul li a, .section-header, .lab-btn, .group-search .group-search-btn form .input-button, .group-search .group-count p:last-child, .work-item .lab-inner .lab-thumb .thumb-inner, .about-item .lab-inner .lab-content, .about-item .lab-inner, .custom-upload { position: relative; } .widget.like-member .widget-content .col .image-thumb::after, .widget.like-member .widget-content .col .image-thumb::before, .blog-section .main-blog .blog-wrapper .post-item .tags-section .tags li span::after, .blog-section .main-blog .blog-wrapper .post-item.post-slider .post-item-inner .post-thumb .blog-slider .blog-slider-prev, .blog-section .main-blog .blog-wrapper .post-item.post-slider .post-item-inner .post-thumb .blog-slider .blog-slider-next, .blog-section .main-blog .blog-wrapper .post-item .post-item-inner .post-content blockquote p::before, .post-item .post-content .post-author .post-author-inner .author-details .post-status .post-privacy:after, .create-post .lab-inner .lab-content .post-form .content-type .content-list .image-video input[type=file], .create-post .lab-inner .lab-content .post-form .content-type .content-list .attach-file input[type=file], .media-wrapper .tab-content .tab-pane .media-content .album .album-thumb::after, .media-wrapper .tab-content .tab-pane .media-content .album .album-thumb:before, .media-wrapper .nav-tabs .nav-item .nav-link.active span:before, .media-wrapper .nav-tabs .nav-item .nav-link span:before, .info-card .info-card-content .info-list li .info-name:after, .profile-section .member-profile .profile-item .profile-information .profile-pic .custom-upload, .profile-section .member-profile .profile-item .profile-cover .custom-upload, .member-page-section .member-wrapper .member-info .all-member p:last-child:before, .app-section .section-wrapper .mobile-app, .clints-section .section-wrapper .clients .client-list .client-content .client-info .name-desi span::after, .clints-section .section-wrapper .clients .client-list .client-content:after, .clints-section .section-wrapper .clients .client-list .client-content, .clints-section .section-wrapper .clients .client-list .client-thumb::after, .clints-section .section-wrapper .clients .client-list .client-thumb::before, .clints-section .section-wrapper .clients .client-list, .banner-form .gender .left:after, .banner-form .person .left:after, .banner-form .age .left:after, .banner-form .city .left:after, .banner-form .interest .left:after, .banner-section .all-shapes .banner-shape, .banner-section .section-wrapper .banner-content .intro-form::after, .banner-section .section-wrapper .banner-content .intro-form::before, .page-header-section.style-1 .page-header-content .page-header-inner .breadcrumb li a::before, .menu-item-has-children > a::before, .menu-item-has-children > a::after, .header-bar span, .header-section, .custom-select::after, .cart-plus-minus .qtybutton, .group-search .group-search-btn form .input-button:before, .group-search .group-count p:last-child:before, .work-item .lab-inner .lab-thumb .thumb-inner .step, .about-item .lab-inner .lab-content:before, .about-item .lab-inner:before, .custom-upload input[type=file] { position: absolute; content: ""; } .widget.like-member .widget-content .col .image-thumb, .widget .widget-title, .comments .comment-list .comment .com-content, .comments .comment-list .comment .com-image, .comments .comment-list .comment, .blog-section .main-blog .blog-wrapper .post-item.video-post .post-item-inner .post-thumb .embed-responsive, .blog-section .post-item-inner .post-thumb, .create-post .lab-inner .lab-content .post-form .content-type .content-list .image-video, .create-post .lab-inner .lab-content .post-form .content-type .content-list .attach-file, .media-wrapper .tab-content .tab-pane .media-content .media-thumb, .profile-section .member-profile .profile-item .profile-information .profile-pic, .clints-section, .work-section, .banner-section, .page-header-section.style-1, .cart-plus-minus, .gallery-img, .lab-btn, .preloader, .price-item .price-item-inner, .story-item .lab-inner .lab-thumb, .custom-upload, .story-item .lab-inner .lab-content h4, .member-item.style-1 .lab-inner .lab-content h6, .footer-section .footer-middle .footer-middle-item-wrapper .footer-middle-item .fm-item-content .fm-item-widget .lab-inner .lab-content h6 a, .blog-section .main-blog .blog-wrapper .post-item .post-item-inner .post-content h3 a, .blog-section .post-item-inner .post-content h4 > a, .group-item .lab-inner .lab-content p { overflow: hidden; } .contact-form-wrapper .contact-form form.comment-form button.lab-btn, .comment-respond .add-comment .comment-form .lab-btn, .blog-section .main-blog .blog-wrapper .post-item.post-slider .post-item-inner .post-thumb .blog-slider .blog-slider-prev, .blog-section .main-blog .blog-wrapper .post-item.post-slider .post-item-inner .post-thumb .blog-slider .blog-slider-next, .create-post .lab-inner .lab-content .post-form .content-type .content-list .image-video input[type=file], .create-post .lab-inner .lab-content .post-form .content-type .content-list .attach-file input[type=file], .top-member-section .filters-button-group .filter-btn, .header-bar, .header-wrapper .menu-area .ellepsis-bar i, .cart-plus-minus, .lab-btn, .custom-upload input[type=file] { cursor: pointer; } .account-form .form-group button, .account-form .form-group input, .contact-form-wrapper .contact-form form.comment-form textarea, .contact-form-wrapper .contact-form form.comment-form input[type=text], .contact-form-wrapper .contact-form form.comment-form [type=email], .contact-form-wrapper .contact-form form.comment-form, .blog-section .main-blog .blog-wrapper .post-item.video-post .post-item-inner .post-thumb .embed-responsive iframe, .blog-section .main-blog .blog-wrapper .post-item.video-post .post-item-inner .post-thumb .embed-responsive, .blog-section .post-item-inner .post-thumb a img, .post-item .post-content .post-description .post-desc-img img, .create-post .lab-inner .lab-content .post-form input[type=text], .media-wrapper .tab-content .tab-pane .media-content .album .album-thumb img, .profile-section .member-profile .profile-item .profile-information .profile-pic img, .profile-section .member-profile .profile-item .profile-cover img, .banner-form button, .banner-form .gender, .banner-form .person, .banner-form .age, .banner-form .city, .banner-form .interest, .header-bar span, .header-section.header-fixed, .header-section, .custom-select select, .custom-select, .group-item.style-1 .lab-inner .lab-content, .group-item.style-1 .lab-inner .lab-thumb, .group-item .lab-inner .lab-content .img-stack li img, .group-item .lab-inner .lab-thumb img, .group-item .lab-inner .lab-thumb, .story-item .lab-inner .lab-thumb img, .member-item.style-1 .lab-inner .lab-thumb img { width: 100%; } .profile-section .member-profile .profile-item .profile-information .profile-pic img, .group-item .lab-inner .lab-content .img-stack li img { height: 100%; } .comments .comment-list .comment .com-content .com-title .reply a, .blog-section .main-blog .blog-wrapper .post-item.code-post .post-item-inner .post-thumb .code-content p, .page-header-section.style-1 .page-header-content .page-header-inner .page-title .title-text, .page-header-section.style-1 .page-header-content .page-header-inner .breadcrumb li a, .text-btn, h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, a h1, a h2, a h3, a h4, a h5, a h6 { font-weight: 700; } .blog-section .post-item-inner .blog-footer .blog-comment, .page-header-section.style-1 .page-header-content .page-header-inner .breadcrumb li.active, .page-header-section.style-1 .page-header-content .page-header-inner .page-title h2 { font-weight: 400; } .page-header-section.style-1 .page-header-content .page-header-inner .breadcrumb, .paginations ul li a, .price-item .price-item-inner .price-bottom ul li { justify-content: center; } .contact-form-wrapper .contact-form form.comment-form, .comments .comment-list .comment .com-content .com-title, .blog-section .main-blog .blog-wrapper .post-item .tags-section, .blog-section .post-item-inner .blog-footer, .post-item .post-meta .post-meta-top, .member-page-section .member-wrapper .member-info, .banner-form .gender, .banner-form .person, .banner-form .age, .banner-form .city, .banner-form .interest, .banner-section .section-wrapper .banner-content .intro-form .intro-form-inner .social-list, .header-wrapper, .header-top-area, .group-search { justify-content: space-between; } .blog-section .main-blog .blog-wrapper .post-item .tags-section .tags, .blog-section .main-blog .blog-wrapper .post-item .tags-section, .blog-section .post-item-inner .blog-footer, .post-item .post-meta .post-meta-bottom .react-list, .post-item .post-content .post-author .post-author-inner .author-details .post-status, .post-item .post-content .post-author .post-author-inner .author-details, .post-item .post-content .post-author .post-author-inner, .create-post .lab-inner .lab-content .post-form .content-type .content-list, .create-post .lab-inner .lab-thumb .thumb-inner, .profile-section .member-profile .profile-details .tab-content .activity-page .activity-tab .nav, .profile-section .member-profile .profile-details .profile-nav .nav-tabs, .profile-section .member-profile .profile-item .profile-information .profile-contact li a, .profile-section .member-profile .profile-item .profile-information, .banner-form .gender, .banner-form .person, .banner-form .age, .banner-form .city, .banner-form .interest, .header-wrapper .menu-area, .header-wrapper, .header-top-area, .paginations ul li a, .price-item .price-item-inner .price-bottom ul li { align-items: center; } .blog-section .main-blog .blog-wrapper .post-item.video-post .post-item-inner .post-thumb .embed-responsive, .blog-section .post-item-inner .post-content .meta, .blog-section .post-item-inner .post-thumb a img, .blog-section .post-item-inner .post-thumb a, .header-wrapper .logo a { display: block; } .account-bottom .social-media li a, .comments .comment-list .comment .com-content .com-title .com-title-meta span, .blog-section .main-blog .blog-wrapper .post-item .tags-section .social-link-list li a, .blog-section .main-blog .blog-wrapper .post-item .tags-section .tags li a, .blog-section .main-blog .blog-wrapper .post-item .tags-section .tags li span i, .create-post .lab-inner .lab-content .post-form .content-type .content-list .image-video, .create-post .lab-inner .lab-content .post-form .content-type .content-list .attach-file, .app-section .section-wrapper .app-content .app-download li a, .app-section .section-wrapper .app-content .app-download li, .banner-section .section-wrapper .banner-content .intro-form .intro-form-inner .social-list .facebook a, .banner-section .section-wrapper .banner-content .intro-form .intro-form-inner .social-list .twitter a, .banner-section .section-wrapper .banner-content .intro-form .intro-form-inner .social-list .google a, .header-bar span, .header-top-area .social-icons li a, .lab-btn, .scrollToTop i, .price-item .price-item-inner .price-bottom .purchase-btn, .custom-upload { display: inline-block; } .footer-section .footer-middle .footer-middle-item-wrapper .footer-middle-item-3 .fm-item-content form .form-group input, .contact-info-wrapper, .contact-form-wrapper .contact-form form.comment-form textarea, .contact-form-wrapper .contact-form form.comment-form input[type=text], .contact-form-wrapper .contact-form form.comment-form [type=email], .contact-form-wrapper, .comment-respond .add-comment .comment-form .lab-btn, .comment-respond .add-comment .comment-form textarea, .comment-respond .add-comment .comment-form input[type=text], .comment-respond, .comments, .blog-section .main-blog .blog-wrapper .post-item .tags-section .social-link-list li a, .post-item, .create-post .lab-inner .lab-thumb .thumb-inner .thumb-content .custom-select select, .create-post, .media-wrapper .tab-content .tab-pane .media-content .media-upload .upload-now .custom-upload, .media-wrapper .nav-tabs .nav-item .nav-link.active span, .media-wrapper .nav-tabs .nav-item .nav-link span, .media-wrapper .nav-tabs .nav-item .nav-link, .media-wrapper .nav-tabs, .info-card, .profile-section .member-profile .profile-details .tab-content .activity-page .activity-tab .nav .custom-select select, .profile-section .member-profile .profile-details .tab-content .activity-page .activity-tab .nav .nav-item .nav-link, .profile-section .member-profile .profile-details .tab-content .activity-page .activity-tab .nav, .profile-section .member-profile .profile-details .profile-nav .nav-tabs .nav-link .item-number, .member-page-section .member-wrapper .member-info .all-member p, .app-section .section-wrapper .app-content .app-download li a, .top-member-section .filters-button-group .filter-btn, .member-button-group .lab-btn, .banner-form button, .banner-section .section-wrapper .banner-content .intro-form .intro-form-inner .social-list .facebook a, .banner-section .section-wrapper .banner-content .intro-form .intro-form-inner .social-list .twitter a, .banner-section .section-wrapper .banner-content .intro-form .intro-form-inner .social-list .google a, .border-radius-2, .group-search .group-count p, .price-item .price-item-inner .price-bottom .purchase-btn, .group-item .lab-inner .lab-content .lab-btn, .group-item .lab-inner, .story-item, .about-item .lab-inner .lab-content:before { border-radius: 2px; } /* @@@@@@@@@@@@@ Extend Property CSS Writing Now @@@@@@@@@@@@@@ */ .footer-section .footer-middle .footer-middle-item-wrapper .footer-middle-item .fm-item-content .fm-item-widget .lab-inner .lab-content h6 a, .blog-section .main-blog .blog-wrapper .post-item .post-item-inner .post-content h3 a, .blog-section .post-item-inner .post-content h4 > a, .group-item .lab-inner .lab-content p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; } .story-item .lab-inner .lab-content h4, .member-item.style-1 .lab-inner .lab-content h6 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; } /* @@@@@@@@@@@@@ Extend Property CSS Writing Now @@@@@@@@@@@@@@ */ .app-section .section-wrapper .app-content .app-download li a, .banner-section .section-wrapper .banner-content .intro-form .intro-form-inner .social-list .google a, .header-wrapper .menu-area .login, .group-item .lab-inner .lab-content .lab-btn, .story-item .lab-inner .lab-content .lab-btn, .work-item .lab-inner .lab-thumb .thumb-inner .step { background-color: #fff; } .footer-section .footer-bottom, .bg-color, .group-item .lab-inner, .story-item, .about-item .lab-inner { background-color: #391965; } .cart-plus-minus .qtybutton, .cart-plus-minus .cart-plus-minus-box { color: #ffffff; } .footer-section .footer-middle .footer-middle-item-wrapper .footer-middle-item-3 .fm-item-content form button, .footer-section .footer-middle .footer-middle-item-wrapper .footer-middle-item-3 .fm-item-content form .lab-btn, .account-form .form-group button, .widget.active-group .widget-content .group-item .lab-inner .lab-content .test .lab-btn:hover, .comment-respond .add-comment .comment-form .lab-btn, .blog-section .main-blog .blog-wrapper .post-item .tags-section .tags li a:hover, .blog-section .main-blog .blog-wrapper .post-item .tags-section .tags li span::after, .blog-section .main-blog .blog-wrapper .post-item .tags-section .tags li span, .blog-section .main-blog .blog-wrapper .post-item.code-post .post-item-inner .post-thumb, .blog-section .main-blog .blog-wrapper .post-item.post-slider .post-item-inner .post-thumb .blog-slider .blog-slider-prev:hover, .blog-section .main-blog .blog-wrapper .post-item.post-slider .post-item-inner .post-thumb .blog-slider .blog-slider-next:hover, .blog-section .main-blog .blog-wrapper .post-item .post-item-inner .post-content blockquote, .load-btn .lab-btn, .create-post .lab-inner .lab-content .post-form .content-type .content-list .post-submit .lab-btn, .media-wrapper .tab-content .tab-pane .media-content .media-upload .upload-now .custom-upload, .media-wrapper .nav-tabs .nav-item .nav-link.active, .media-wrapper .nav-tabs .nav-item .nav-link span, .profile-section .member-profile .profile-details .tab-content .activity-page .activity-tab .nav .nav-item .nav-link.active, .profile-section .member-profile .profile-details .profile-nav .nav-tabs .dropdown ul li .dropdown-item:hover, .profile-section .member-profile .profile-details .profile-nav .nav-tabs .nav-link .item-number, .profile-section .member-profile .profile-item .profile-information .profile-contact li a .icon, .fore-zero .section-wrapper .zero-item .zero-content .lab-btn, .member-page-section .member-wrapper .member-info .all-member p:last-child, .clints-section .section-wrapper .clients .client-list .client-content:after, .clints-section .section-wrapper .clients .client-list .client-content, .banner-form button, .header-wrapper .menu-area .signup, .cart-plus-minus .qtybutton:hover, .paginations ul li a.active, .paginations ul li a:hover, .bg-theme, .scrollToTop i, .group-search .group-search-btn form .input-button input[type=submit], .group-search .group-count p:last-child, .member-filter .member-filter-inner, .price-item .price-item-inner .price-bottom .purchase-btn, .group-item.style-1 .lab-inner .lab-content .lab-btn:hover, .group-item:hover .lab-inner, .story-item .lab-inner .lab-content .lab-btn:hover, .about-item .lab-inner .lab-content:before, .member-item.style-1:hover .lab-inner { background: #df314d; } .account-wrapper, .contact-info-wrapper, .contact-form-wrapper, .widget.active-group .widget-content .group-item .lab-inner, .widget, .comment-respond, .comments, .blog-section .post-item-inner .blog-footer, .blog-section .post-item-inner .post-content, .post-item, .create-post, .media-wrapper .tab-content .tab-pane, .media-wrapper .nav-tabs .nav-item .nav-link.active span, .media-wrapper .nav-tabs, .info-card, .profile-section .member-profile .profile-details .tab-content .activity-page .activity-tab .nav, .profile-section .member-profile .profile-details .profile-nav, .fore-zero .section-wrapper .zero-item, .member-page-section .member-wrapper .member-info .all-member p:first-child, .top-member-section .filters-button-group .filter-btn, .paginations ul li a, .bg-prime, .lab-btn, .group-search .group-search-btn form input[type=text], .group-search .group-count p:first-child, .price-item .price-item-inner, .group-item.style-1 .lab-inner, .member-item.style-1 .lab-inner { background: #210053; } .account-bottom .social-media li a, .blog-section .main-blog .blog-wrapper .post-item .tags-section .social-link-list li a, .blog-section .main-blog .blog-wrapper .post-item.code-post .post-item-inner .post-thumb .code-content, .blog-section .main-blog .blog-wrapper .post-item.post-slider .post-item-inner .post-thumb .blog-slider .blog-slider-prev, .blog-section .main-blog .blog-wrapper .post-item.post-slider .post-item-inner .post-thumb .blog-slider .blog-slider-next, .load-btn, .profile-section .member-profile .profile-item .profile-information .profile-contact li a .icon, .profile-section .member-profile .profile-item .profile-information .profile-name, .fore-zero .section-wrapper .zero-item, .banner-section .section-wrapper .banner-content .intro-form .intro-form-inner .social-list .facebook a, .banner-section .section-wrapper .banner-content .intro-form .intro-form-inner .social-list .twitter a, .page-header-section.style-1, .header-top-area .social-icons li a, .cart-plus-minus .qtybutton, .cart-plus-minus .cart-plus-minus-box, .section-header, .scrollToTop i, .price-item .price-item-inner, .member-item.style-1 .lab-inner .lab-content { text-align: center; } .comments .comment-list .comment, .blog-section .main-blog .blog-wrapper .post-item .tags-section .tags li, ul li { list-style: none; } /* @@@@@@@@@@@@@ Extend Property Margin 10 - 30 CSS Writing Now @@@@@@@@@@@@@@ */ .widget .widget-content, .blog-section .main-blog .blog-wrapper .post-item .tags-section .tags, .page-header-section.style-1, .header-top-area .social-icons, .cart-plus-minus .qtybutton, .cart-plus-minus .cart-plus-minus-box, .paginations ul, .work-item .lab-inner .lab-thumb .thumb-inner .step p, ul { margin: 0; } .media-wrapper .tab-content .tab-pane .media-content .album .album-thumb { margin: 30px; } .widget.search-widget .widget-content .banner-form button, .widget .widget-title h5, .widget:last-child, .comment-respond h3, .comments .comment-list .comment .com-content .com-title .com-title-meta h4, .comments .widget-title h3, .blog-section .main-blog .blog-wrapper .post-item.code-post .post-item-inner .post-thumb .code-content p, .post-item .post-meta .post-meta-top p, .post-item .post-content .post-description p, .post-item .post-content .post-author .post-author-inner .author-details h6, .media-wrapper .tab-content .tab-pane .media-title h2, .info-card .info-card-content .info-list li p, .info-card .info-card-content p, .info-card .info-card-title h6, .profile-section .member-profile .profile-item .profile-information .profile-contact li a .text p, .member-page-section .member-wrapper .member-info .all-member p, .app-section .section-wrapper .app-content .app-download li a .app-content h4, .app-section .section-wrapper .app-content .app-download li a .app-content p, .app-section .section-wrapper .app-content h4, .page-header-section.style-1 .page-header-content .page-header-inner .page-title p, .header-top-area .social-icons li p, .group-search .group-count p, .price-item .price-item-inner .price-bottom ul li p, .work-item .lab-inner .lab-content p, .about-item .lab-inner .lab-content p, .about-item .lab-inner .lab-content h2, .member-item.style-2 .lab-inner .lab-thumb, .member-item.style-1:hover .lab-inner .lab-thumb, .member-item.style-1 .lab-inner .lab-content p { margin-bottom: 0px; } .comments .comment-list .comment .com-content .com-title .com-title-meta span, .media-wrapper .tab-content .tab-pane .media-content .media-upload, .app-section .section-wrapper .app-content .app-download li:first-child, .banner-form button, .banner-form .gender, .banner-form .person, .banner-form .age, .banner-form .city, .banner-form .interest, .member-filter .member-filter-inner .filter-form > div, .story-item .lab-inner .lab-thumb, .work-item .lab-inner .lab-content h4 { margin-bottom: 10px; } .account-form .form-group { margin-bottom: 25px; } .media-wrapper .tab-content .tab-pane, .profile-section .member-profile .profile-item .profile-information .profile-name { margin-top: 10px; }
Js Structure
We are using several Js files in this Template. labartisan Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset Js file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
Js Fiile Included
- jquery.js used
- bootstrap.min.js used
- waypoints.min.js used
- jquery.counterup.min.js used
- swiper.min.js used
- and some other necessary css files
functions.js situated on assets/js/ contain the the all necessary custom style which is well organized and following are the functions.js file structure :
(function ($) { "use strict"; $(window).on('load', function () { $('.preloader').fadeOut(1000); //Member Filter Isotop // init Isotope var $grid = $('.grid-memberlist').isotope({ itemSelector: '.filter-item', layoutMode: 'fitRows', }); // filter functions var filterFns = { // show if name ends with -ium ium: function () { var name = $(this).find('.name').text(); return name.match(/ium$/); } }; // bind filter button click $('.button-group').on('click', '.filter-btn', function () { var filterValue = $(this).attr('data-filter'); // use filterFn if matches value filterValue = filterFns[filterValue] || filterValue; $grid.isotope({ filter: filterValue }); }); // change is-checked class on buttons $('.button-group').each(function (i, buttonGroup) { var $buttonGroup = $(buttonGroup); $buttonGroup.on('click', '.filter-btn', function () { $buttonGroup.find('.is-checked').removeClass('is-checked'); $(this).addClass('is-checked'); }); }); }) $(document).ready(function () { /*==== header Section Start here =====*/ $("ul>li>.submenu").parent("li").addClass("menu-item-has-children"); // drop down menu width overflow problem fix $('ul').parent('li').hover(function () { var menu = $(this).find("ul"); var menupos = $(menu).offset(); if (menupos.left + menu.width() > $(window).width()) { var newpos = -$(menu).width(); menu.css({ left: newpos }); } }); $('.menu li a').on('click', function (e) { var element = $(this).parent('li'); if (element.hasClass('open')) { element.removeClass('open'); element.find('li').removeClass('open'); element.find('ul').slideUp(300, "swing"); } else { element.addClass('open'); element.children('ul').slideDown(300, "swing"); element.siblings('li').children('ul').slideUp(300, "swing"); element.siblings('li').removeClass('open'); element.siblings('li').find('li').removeClass('open'); element.siblings('li').find('ul').slideUp(300, "swing"); } })